<template>
  <div>
    <div class="input_box_container">
      <input
        type="text"
        v-model="name"
        @keydown.enter="searchs"
        placeholder="请输入姓名查找"
      />
      <i
        id="magnifier_label"
        slot="prefix"
        class="el-input__icon el-icon-search"
        @click="searchs"
      ></i>
    </div>
    <!--  -->
    <el-table :data="showList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="username" label="用户名字" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="role_name" label="身份"> </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      :current-page="pagenum"
      @current-change="change"
      @size-change="change2"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showList: [],
      list: [],
      total: 0,
      pagenum: 1,
      pagesize: 2,
      name: "",
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.$http(
        "https://www.liulongbin.top:8888/api/private/v1/users",
        "get",
        {},
        { pagenum: this.pagenum, pagesize: this.pagesize }
      ).then((res) => {
        console.log(res);
        this.showList = res.data.users;
        this.list = res.data.users;
        this.total = res.data.total;
      });
    },
    change(val) {
      this.pagenum = val;
      this.getlist();
    },
    change2(val) {
      this.pagesize = val;
      this.getlist();
    },
    searchs() {
      this.showList = this.list.filter((item) => {
        return item.username.includes(this.name);
      });
    },
  },
};
</script>
<style lang="scss">
.input_box_container {
  width: 300px;
  height: 40px;
  margin-right: 1000px;
  display: inline-flex;
  input {
    width: 80%;
    height: 80%;
  }
}
#magnifier_label {
  width: 50px;
  height: 33px;
  border: 1px solid;
  cursor: pointer;
  background-color: #fff;
}
</style>